<template>
    <div class="barCode" id="barCode">
        <p>条形码</p>
        <div class="demo-input-suffix">
            <div class="sousuo">
                <div class="erCode"></div>
                <input v-model="inputVal" placeholder="直接输入或扫描条形码自动生成进行查看套餐信息" type="search" />
                <button>搜索</button>
            </div>
        </div>
    </div>
</template>

<script>
    import apis from '../apis/apis'
    export default {
        data() {
            return {
                tableData: [],
                inputVal: '',
                professList: [],
                professUser: {},
                input: '',
                barCode: '条形码',
                searchName: {
                    name: ''
                }
            }
        },
        mounted() {
           
        },
         methods: {
             
        },
    }
</script>

<style>
    .demo-input-suffix {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .sousuo {
        width: 700px;
        height: 32px;
        display: flex;
        justify-content: center;
        position: relative;
        padding: 0 0px 0 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
        margin: 15px;
    }
    
    .sousuo .erCode {
        width: 60px;
        height: 100%;
        background: url(../../static/img/qr_code.png);
        background-size: 100%;
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .sousuo input {
        border: none;
        background: transparent;
        width: 500px;
        height: 100%;
        outline: none;
        text-indent: 6px;
        padding-right: 10px;
    }
    
    .sousuo>button {
        width: 140px;
        border: none;
        background: transparent;
        background-color: rgb(111, 140, 184);
        border: 1px solid rgb(111, 140, 184);
        color: white;
        outline: none;
        border-left: 1px solid #ddd;
        cursor: pointer;
    }
    
    .barCode>p {
        text-align: center;
    }
    
    .demo-side {
        width: 100%;
        padding: 10px 20px;
        border: 1px solid #f5f5f5;
    }
    
    .demo-side>p {
        font-size: 17px;
        height: 48px;
        line-height: 48px;
    }
    
    .demo-side .studentInf {
        display: inline-flex;
        flex-wrap: wrap;
        flex-direction: column;
        padding: 0 15px;
    }
    
    .demo-side .studentInf li {
        height: 30px;
    }
    
    .demo-side .studentInf li label {
        width: 80px;
    }
    
    .demo-side .studentInf li span {
        width: 180px;
    }
    
    .payment-Detail {
        width: 100%;
        border-collapse: collapse;
        height: 79px;
    }
    
    .payment-Detail tr:nth-child(1) {
        background: #dbdbdb;
    }
    
    .payment-Detail th,
    .payment-Detail td {
        border: 1px solid #000;
    }
    
    .profess-List {
        width: 100%;
        border-collapse: collapse;
    }
    
    .profess-List th,
    .profess-List td {
        border: 1px solid #000;
    }
    
    .payment {
        width: 100%;
        height: 55px;
        background: #5e87b0;
        border-radius: 5px;
        line-height: 17px;
    }
    
    .payment li {
        float: left;
        font-size: 17px;
        padding: 20px;
        color: white;
    }
</style>